<template>
  <div class="cosmic-bg">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  class Star {
    constructor() {
      this.x = Math.random() * canvas.width
      this.y = Math.random() * canvas.height
      this.z = Math.random() * canvas.width
      this.size = Math.random() * 2
    }

    update() {
      this.z -= 2
      if (this.z <= 0) {
        this.z = canvas.width
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
      }
    }

    draw() {
      const x = (this.x - canvas.width / 2) * (canvas.width / this.z)
      const y = (this.y - canvas.height / 2) * (canvas.width / this.z)
      const screenX = x + canvas.width / 2
      const screenY = y + canvas.height / 2

      if (screenX < 0 || screenX > canvas.width || screenY < 0 || screenY > canvas.height) {
        return
      }

      const size = (1 - this.z / canvas.width) * this.size * 3
      const opacity = 1 - this.z / canvas.width

      // 星星
      const gradient = ctx.createRadialGradient(screenX, screenY, 0, screenX, screenY, size * 2)
      gradient.addColorStop(0, `rgba(255, 255, 255, ${opacity})`)
      gradient.addColorStop(0.5, `rgba(150, 200, 255, ${opacity * 0.5})`)
      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
      
      ctx.fillStyle = gradient
      ctx.fillRect(screenX - size * 2, screenY - size * 2, size * 4, size * 4)

      // 轨迹
      const prevZ = this.z + 2
      const prevX = (this.x - canvas.width / 2) * (canvas.width / prevZ) + canvas.width / 2
      const prevY = (this.y - canvas.height / 2) * (canvas.width / prevZ) + canvas.height / 2

      ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.3})`
      ctx.lineWidth = size * 0.5
      ctx.beginPath()
      ctx.moveTo(prevX, prevY)
      ctx.lineTo(screenX, screenY)
      ctx.stroke()
    }
  }

  const stars = Array.from({ length: 300 }, () => new Star())

  const animate = () => {
    ctx.fillStyle = 'rgba(0, 0, 10, 0.3)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    stars.forEach(star => {
      star.update()
      star.draw()
    })

    animationId = requestAnimationFrame(animate)
  }

  animate()

  const handleResize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
  })
})
</script>

<style scoped>
.cosmic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at center, #000a1e 0%, #000000 100%);
}

canvas {
  display: block;
}
</style>

